{% block sw_media_base_item %}
<div
    class="sw-media-base-item"
    :class="mediaItemClasses"
    role="button"
    tabindex="0"
    @click="handleItemClick"
    @keydown.enter.self="handleItemClick"
>

    {% block sw_media_base_item_selected_indicator %}
    <mt-checkbox
        v-if="!isList && allowEdit"
        v-model:checked="listSelected"
        class="sw-media-base-item__selected-indicator"
        :class="selectionIndicatorClasses"
        @update:checked="onClickedItem"
    />
    {% endblock %}

    {% block sw_media_base_item_preview %}
    <div class="sw-media-base-item__preview-container">
        <slot
            name="preview"
            v-bind="{ item }"
        >
            {% block sw_media_base_item_slot_media_preview %}{% endblock %}
        </slot>

        {# @experimental stableVersion:v6.8.0 feature:SPATIAL_BASES #}
        {% block sw_media_base_spatial_label_indicator %}
        <div
            v-if="isSpatial"
            class="sw-media-base-item__labels"
        >
            <sw-label
                variant="neutral-reversed"
                appearance="pill"
                size="medium"
            >
                <mt-icon
                    v-if="item.config?.spatial?.arReady ?? defaultArReady"
                    name="regular-AR"
                    size="16px"
                />
                <mt-icon
                    v-else
                    name="regular-3d"
                    size="16px"
                />

                <span class="sw-media-base-item__labels-text">{{ (item.config?.spatial?.arReady ?? defaultArReady) ? $tc('sw-product.mediaForm.arSubline') : $tc('sw-product.mediaForm.spatialSubline') }}</span>
            </sw-label>
        </div>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_base_item_name_container %}
    <div
        class="sw-media-base-item__name-container"
        :class="mediaNameContainerClasses"
    >
        <slot
            name="name"
            v-bind="{ item, isInlineEdit, startInlineEdit, endInlineEdit }"
        ></slot>
    </div>
    {% endblock %}

    {% block sw_media_base_item_metadata_container %}
    <div
        v-if="isList && showContextMenuButton"
        class="sw-media-base-item__metadata-container"
    >
        {% block sw_media_base_item_metadata %}
        <slot
            name="metadata"
            v-bind="{ item }"
        >
            {% block sw_media_base_item_slot_media_item_metadata %}{% endblock %}
        </slot>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_media_base_item_context_menu %}
    <sw-context-button
        v-if="showContextMenuButton && !isLoading"
        ref="swContextButton"
    >
        {% block sw_media_base_item_context_items %}
        <slot
            name="context-menu"
            v-bind="{ item, startInlineEdit, allowEdit, allowDelete }"
        >
            {% block sw_media_base_item_slot_media_item_context_menu %}{% endblock %}
        </slot>
    {% endblock %}
    </sw-context-button>
    {% endblock %}

    {% block sw_media_base_item_list_selected_indicator %}
    <mt-checkbox
        v-if="isList && showSelectionIndicator && allowMultiSelect"
        v-model:checked="listSelected"
        class="sw-media-base-item__selected-indicator"
        :class="selectionIndicatorClasses"
        @update:checked="onClickedItem"
    />
    {% endblock %}

    {% block sw_media_base_item_loading_indicator %}
    <mt-icon
        v-if="isLoading"
        class="sw-media-base-item__loader"
        name="regular-spinner-star"
        size="16px"
    />
    {% endblock %}

    <slot
        name="modal-windows"
        v-bind="{ item, allowEdit, allowDelete }"
    ></slot>
</div>
{% endblock %}
